<template>
  <div>
    <div class="ta">
      <center>
        <!-- 表格 :data="sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)"-->
        <el-table
          :data="
            sea.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          style="width: 1100px"
          @select-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :id="list.appointId"
            v-model="list.appointId"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="user_id"
            label="编号"
            width="50px"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="user_name"
            label="签约人姓名"
            width="100px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="user_cardId"
            label="身份证号"
            width="170px"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="user_phone" label="手机号码" align="center">
          </el-table-column>
          <el-table-column
            prop="contract_state"
            label="签约状态"
            width="90px"
            :formatter="intpenStatus"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="sign_team"
            label="签约医生团队"
            :formatter="intpenDocter"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="serve_page"
            label="签约服务包"
            align="center"
            :formatter="intpenPage"
          >
          </el-table-column>
          <el-table-column prop="end_time" label="最后修改时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                style="font-size: 13px"
                >查看详情</el-button
              >
              <el-button
                @click="handleClick1(scope.row)"
                type="text"
                size="small"
                style="font-size: 13px"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </center>
      <br />
      <!-- 分页-->
      <center>
        <!-- 分页器 -->
        <div class="block" style="margin-top: 15px">
          <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="sea.length"
          >
          </el-pagination>
        </div>
      </center>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080";
export default {
  props: {
    sea: {
      type: Array,
    },
  },
  data() {
    return {
      list: [],
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页的数据条数
    };
  },
  methods: {
    //签约状态处理
    intpenStatus(row, column, cellValue, index) {
      if (cellValue === 1) {
        return <font color="#3DD4A7">待审核</font>;
      } else if (cellValue === 2) {
        return <font color="#FDDB78">待支付</font>;
      } else if (cellValue === 3) {
        return <font color="#FA746B">已驳回</font>;
      }
    },
    //签约医生团队
    intpenDocter(row, column, cellValue, index) {
      if (cellValue === 1) {
        return "A团队";
      } else if (cellValue === 2) {
        return "B团队";
      } else if (cellValue === 3) {
        return "C团队";
      }
    },
    //签约服务包处理
    intpenPage(row, column, cellValue, index) {
      if (cellValue === 1) {
        return "基础包";
      } else if (cellValue === 2) {
        return "老年人服务包";
      } else if (cellValue === 3) {
        return "慢性病护理包";
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //   alert(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick(row) {
      this.$router.push({
        path: "/sign03",
        query: {
          id: row.user_id,
        },
      });
    },
    handleClick1(row) {
      this.$router.push({
        path: "/sign04",
        query: {
          id: row.user_id,
          list: this.list,
        },
      });
    },
  },
};
</script>

<style>
.ta {
  float: left;
  width: 98%;
  margin-top: 21%;
  margin-left: 2%;
  /* background-color: red; */
}
a {
  text-decoration: none;
}
.chakn1 {
  color: blue;
}
</style>